Chapter 4 - Project Setup and Tooling

1

Creating a New Flutter Project

Using Flutter CLI

Create a new Flutter project from the command line:

Create Project Command

flutter create my_app
cd my_app

Project Options

--org: Organization identifier (e.g., com.example)
--platforms: Specify target platforms (android, ios, web, etc.)
--project-name: Custom project name

Example with Options

flutter create --org com.afrilen --platforms android,ios course_catalog

2

Project Structure

Key Files and Directories

pubspec.yaml — Project metadata, dependencies, assets, and configuration
lib/main.dart — Application entry point
lib/ — Main source folder for Dart code
android/ — Android-specific configuration and native code
ios/ — iOS-specific configuration and native code
test/ — Unit and widget tests
assets/ — Images, fonts, and other resources
.dart_tool/ and build/ — Generated files (exclude from version control)

Suggested Folder Layout

lib/
  main.dart
  app.dart
  models/
    user.dart
    course.dart
  screens/
    home_screen.dart
    detail_screen.dart
  widgets/
    custom_button.dart
    card_widget.dart
  services/
    api_service.dart
    storage_service.dart
  utils/
    constants.dart
    helpers.dart

3

Understanding pubspec.yaml

Key Sections

name: Package name (lowercase with underscores)
description: Project description
version: Version number (e.g., 1.0.0+1)
dependencies: Runtime dependencies
dev_dependencies: Development-only dependencies
flutter: Flutter-specific configuration (assets, fonts)

Example pubspec.yaml

name: course_catalog
description: A Flutter course catalog app
version: 1.0.0+1

environment:
  sdk: '>=3.0.0 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0
  provider: ^6.1.0
  shared_preferences: ^2.2.0

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^3.0.0

flutter:
  uses-material-design: true
  assets:
    - assets/images/
    - assets/icons/
  fonts:
    - family: CustomFont
      fonts:
        - asset: assets/fonts/CustomFont-Regular.ttf

4

Managing Dependencies

Adding Packages

Add package name and version to pubspec.yaml
Run flutter pub get to download dependencies
Import packages in your Dart files: import 'package:http/http.dart';

Common Commands

# Get dependencies
flutter pub get

# Upgrade dependencies
flutter pub upgrade

# Check for outdated packages
flutter pub outdated

# Add a package
flutter pub add http

# Remove a package
flutter pub remove http

Version Constraints

^1.2.3 — Compatible with 1.2.3, up to (but not including) 2.0.0
1.2.3 — Exact version
>=1.2.3 <2.0.0 — Range specification

5

IDE Setup and Configuration

VS Code Setup

Install Flutter extension from VS Code marketplace
Install Dart extension (usually installed with Flutter extension)
Configure Flutter SDK path in settings if needed
Use Command Palette (Ctrl+Shift+P / Cmd+Shift+P) for Flutter commands

Android Studio Setup

Install Flutter and Dart plugins via Plugins settings
Configure Flutter SDK path in Preferences
Set up Android SDK and create AVD (Android Virtual Device)
Use Flutter Device Selector to choose target device

Useful IDE Features

Hot Reload (r) — Apply code changes instantly
Hot Restart (R) — Restart app with state reset
Flutter Inspector — Visual widget tree debugging
Code formatting (Shift+Alt+F / Shift+Option+F)
Go to definition, Find references, Rename symbol

6

Flutter DevTools

Overview

Flutter DevTools is a suite of debugging and performance tools for Flutter apps.

Accessing DevTools

Run flutter pub global activate devtools
Start DevTools: flutter pub global run devtools
Or use IDE integration (VS Code/Android Studio)
Connect to running app via the URL shown in console

Key Tools

Widget Inspector: Visualize widget tree, inspect properties
Performance: Frame rendering analysis, CPU profiling
Memory: Memory usage, heap snapshots, leak detection
Network: HTTP request monitoring
Logging: Real-time log viewing

7

Build Variants and Environments

Flavors (Android) and Schemes (iOS)

Configure different build variants for development, staging, and production environments.

Using Dart Defines

# Development
flutter run --dart-define=ENV=dev --dart-define=API_URL=https://dev-api.example.com

# Production
flutter build apk --dart-define=ENV=prod --dart-define=API_URL=https://api.example.com

Accessing in Code

const String apiUrl = String.fromEnvironment('API_URL', 
    defaultValue: 'https://api.example.com');
const String env = String.fromEnvironment('ENV', defaultValue: 'dev');

// Use in your app
if (env == 'dev') {
  // Development-specific configuration
}

8

Version Control Setup

Git Configuration

Initialize repository: git init
Create .gitignore file (Flutter provides a template)
Commit initial project structure

Essential .gitignore Entries

# Flutter/Dart
.dart_tool/
.flutter-plugins
.flutter-plugins-dependencies
.packages
.pub-cache/
.pub/
build/
*.iml
*.ipr
*.iws
.idea/

# Android
*.apk
*.aab
*.ap_
*.dex
local.properties

# iOS
*.mode1v3
*.mode2v3
*.moved-aside
*.pbxuser
*.xcuserdata
*.xcworkspace
Pods/
*.app.dSYM.zip

Best Practices

Commit pubspec.yaml and pubspec.lock
Don't commit build/ or .dart_tool/ directories
Use meaningful commit messages
Create branches for features and fixes

9

Running and Debugging

Running Apps

flutter run — Run in debug mode
flutter run --release — Run in release mode
flutter run --profile — Run in profile mode (for performance testing)
Use device selector: flutter devices to list available devices

Debugging Techniques

Set breakpoints in IDE
Use print() or debugPrint() for logging
Use assert() for development-time checks
Inspect widget tree with Flutter Inspector
Use flutter analyze for static analysis

Useful Commands

# Check for issues
flutter doctor
flutter analyze

# Clean build
flutter clean
flutter pub get

# Build for specific platform
flutter build apk
flutter build ios
flutter build web

10

Project Organization Best Practices

Organization Guidelines

Separate concerns: models, screens, widgets, services, utils
One widget per file for major components
Use meaningful file and folder names
Keep main.dart minimal; extract app setup to separate files
Create reusable widgets in a widgets/ folder
Centralize constants and configuration
Document complex logic with comments

11

Exercises

1. Project Setup

Create a new Flutter project named "my_first_app". Configure it with your organization identifier. Add three dependencies: http, provider, and shared_preferences. Verify the setup with flutter doctor and flutter analyze.

2. Project Structure

Organize your project with the suggested folder layout. Create placeholder files for models, screens, widgets, and services folders. Document your structure in a README.md file.

3. Environment Configuration

Set up environment configuration using Dart defines. Create a constants file that reads API_URL and ENV from environment variables with sensible defaults. Test with different build commands.

Learning Objectives